<template>
  <div class="main">
    <van-nav-bar
      class="head"
    >
    <!-- <span slot="left" class="head-left" @click="onClickLeft" v-show="htitle.indexOf('登录') < 0"><van-icon name="arrow-left" /><span>返回</span></span> -->
    <span class="head-title" slot="title">{{htitle}}</span>
    </van-nav-bar>
    <div>
      <van-loading class="loading" v-show = "isLoading"/>
      <router-view />
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'index',
  data () {
    return {
      // htitle: this.$route.meta.name
    }
  },
  computed: {
    htitle: function () {
      return this.$route.meta.name
    },
    ...mapState({
      isLoading: state => state.loading.isLoading
    })
  },
  methods: {
    onClickLeft () {
      this.$router.back(-1)
    },
    onClickRight () {

    }
  }
}
</script>
<style lang="stylus">
  .van-toast--default{
    width auto
    .van-toast__text{
      font-size 42px !important
    }
  }
.main{

  .loading{
    position fixed
    z-index 999
    top 40%
    left 40%
    right 40%
    bottom 40%
    width 20%
    height 20%
  }
  .head-left{
    .van-icon{
      color #ffffff !important
      margin-right 12px !important
    }
  }
  .van-nav-bar__text{
    font-size:42px;
    color:rgba(255,255,255,1);
  }
}
</style>

<style lang="stylus" scoped>
.head{
  height: 100px;
  line-height 100px
  background:rgba(55,59,62,1);
  box-shadow:0px 0px 6px rgba(0,0,0,0.1);
  position fixed
  top: 0
  width 100%
  .head-left{
    color #ffffff
    font-size 42px
  }
  .head-title{
    font-size:42px;
    font-family:PingFang-SC-Bold;
    font-weight:bold;
    color:rgba(255,255,255,1);
  }

}
</style>
